<template>
  <div>
    <!-- 3、插入 -->
    <!-- 头部区域 -->
    <app-head></app-head>
    <!-- 左侧导航区域 -->
    <app-navbar></app-navbar>
    <!-- 右侧主区域 -->
    <!-- <app-main></app-main> -->
    <!-- 设置路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
// 1、引入
import appHead from "@/components/appHead";
import appMain from "@/components/appMain";
import appNavbar from "@/components/appNavbar";
export default {
  data() {
    return {};
  },

  // 2、注册
  components: {
    appHead,
    appNavbar,
    appMain
  },

  methods: {}
};
</script>
<style scoped>
/* 头部区域 */
.header {
  position: absolute;
  height: 60px;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  background: #e0e0e0;
}
/* 左侧导航栏 */
.navbar {
  position: absolute;
  width: 230px;
  top: 60px;
  left: 0;
  bottom: 0;
  overflow: auto;
  background: #008842;
}
/* 右侧主区域 */
.main {
  position: absolute;
  top: 60px;
  left: 230px;
  bottom: 0;
  padding: 0;
  overflow: auto;
  padding-left: 20px;
  /* background: #f7f8f8; */
}
</style>